<template>
	<view class="container">
		<view class="info-card f-a-start">
			<!-- #ifdef MP-WEIXIN -->
			<button class="user-pic-btn" plain open-type="chooseAvatar" @chooseavatar="onChooseWxAvatar">
				<image :src="userInfo.avatar" mode="aspectFill" class="user-pic">
				</image>
			</button>
			<!-- #endif -->

			<!-- #ifndef MP-WEIXIN -->
			<button class="user-pic-btn" plain @click="changeUserPic">
				<image :src="userInfo.avatar" mode="aspectFill" class="user-pic">
				</image>
			</button>
			<!-- #endif -->

			<view class="user-name f-c-between">
				<view v-if="token" class="left-part f-a-center">
					<view class="name">{{userInfo.nickname}}</view>
					<view v-if="!authInfo||!authInfo.status" class="auth no-auth" @click="goPage('/pages/mine/auth')">未认证</view>
					<view v-else-if="authInfo.status === '0'" class="auth no-auth" @click="goPage('/pages/mine/auth')">待审核</view>
					<view v-else-if="authInfo.status === '1'" class="auth" @click="goPage('/pages/mine/auth')">已认证</view>
					<view v-else-if="authInfo.status === '2'" class="auth no-auth" @click="goPage('/pages/mine/auth')">认证拒绝</view>
				</view>
				<view v-else class="not-login" @click="goPage('/pages/login/login')">登录/注册</view>

				<view class="setting f-a-center" @click="goPage('/pages/mine/setting')">
					设置<image src="/static/mine/icon-setting.png" class="icon-setting"></image>
				</view>
			</view>
		</view>
		<u-gap height="8" bgColor="#F4F7F7"></u-gap>

		<view class="order-card">
			<view class="card-title f-c-between">
				<span>我的订单</span>
				<span class="all" @click="goPage('/pages/order/list?current=0')">全部订单</span>
			</view>
			<view class="flex">
				<view class="grid-item" @click="goPage('/pages/order/list?current=1')">
					<view style="position: relative;display: inline-block;">
						<u-badge max="99" :value="orderNumObj.daifukuan" bgColor="#ff3b1b" absolute :offset="[-4,-4]"
							style="z-index: 9;"></u-badge>
						<image src="/static/mine/icon-pay.png" class="grid-img"></image>
						<view class="grid-text">待付款</view>
					</view>
				</view>

				<view class="grid-item" @click="goPage('/pages/order/list?current=2')">
					<view style="position: relative;display: inline-block;">
						<u-badge max="99" :value="orderNumObj.daifahuo" bgColor="#ff3b1b" absolute :offset="[-4,-4]"
							style="z-index: 9;"></u-badge>
						<image src="/static/mine/icon-delivery.png" class="grid-img"></image>
						<view class="grid-text">待发货</view>
					</view>
				</view>

				<view class="grid-item" @click="goPage('/pages/order/list?current=3')">
					<view style="position: relative;display: inline-block;">
						<u-badge max="99" :value="orderNumObj.daishouhuo" bgColor="#ff3b1b" absolute :offset="[-4,-4]"
							style="z-index: 9;"></u-badge>
						<image src="/static/mine/icon-receiver.png" class="grid-img"></image>
						<view class="grid-text">待收货</view>
					</view>
				</view>

				<view class="grid-item" @click="goPage('/pages/order/list?current=4')">
					<image src="/static/mine/icon-finish.png" class="grid-img"></image>
					<view class="grid-text">已完成</view>
				</view>
			</view>
		</view>
		<u-gap height="8" bgColor="#F4F7F7"></u-gap>

		<view class="order-card common-card">
			<view class="card-title f-c-between">
				<span>常用功能</span>
			</view>
			<view class="flex-warp">
				<view class="grid-item" @click="goPage('/pages/address/list')">
					<image src="/static/mine/icon-address.png" class="grid-img"></image>
					<view class="grid-text">地址管理</view>
				</view>
				<view class="grid-item" @click="callPhone">
					<image src="/static/mine/icon-contact.png" class="grid-img"></image>
					<view class="grid-text">联系我们</view>
				</view>
				<view class="grid-item" @click="goPage('/pages/mine/browse')">
					<image src="/static/mine/icon-browse.png" class="grid-img"></image>
					<view class="grid-text">浏览记录</view>
				</view>
				<view class="grid-item" @click="goPage('/pages/webview/index?type=syxz&title=使用须知')">
					<image src="/static/mine/icon-use.png" class="grid-img"></image>
					<view class="grid-text">使用须知</view>
				</view>
				<view class="grid-item" @click="goPage('/pages/mine/farmersAuthList')">
					<image src="/static/mine/icon-auth.png" class="grid-img"></image>
					<view class="grid-text">帮农户认证</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNumObj: {
					daifahuo: 0,
					daifukuan: 0,
					daishouhuo: 0,
				}
			}
		},
		onLoad() {
			this.$store.dispatch('get_orderStatus')
		},
		onShow() {
			if (this.token) {
				this.$store.dispatch('get_authUserRealInfo')
				this.getReceiptOrderNum()
			}
		},
		methods: {
			//获取微信用户头像
			onChooseWxAvatar(e) {
				let tempUrl = e.detail.avatarUrl
				this.$util.fileUtil.uploadFile(tempUrl).then(data => {
					this.updateUserInfo(data.url)
				})
			},

			//修改用户头像
			changeUserPic() {
				this.$util.fileUtil.chooseImageUpload().then(resList => {
					this.updateUserInfo(resList[0].url)
				})
			},

			//修改用户信息
			updateUserInfo(avatar) {
				this.$api.update_user_info({
					avatar
				}).then(res => {
					this.$store.commit('SET_userInfo', res)
				})
			},

			//获取待收货的数量
			getReceiptOrderNum() {
				this.$api.get_receipt_orderNum().then(res => {
					this.orderNumObj = res
				})
			},

			goPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-card {
		height: 224rpx;
		background: #FFC046;
		padding: 26rpx 40rpx 26rpx 54rpx;
		box-sizing: border-box;

		.user-pic-btn {
			padding: 0;
			margin-right: 44rpx;
			border: 0;
			line-height: 1;
		}

		.user-pic {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}

		.user-name {
			flex: 1;
			padding-top: 14rpx;

			.left-part {
				.name {
					font-weight: 500;
					// font-size: 28rpx;
					font-size: calc(28rpx * 1.4);
					color: #000000;
				}

				.auth {
					font-weight: 500;
					// font-size: 24rpx;
					font-size: calc(24rpx * 1.2);
					color: #FFFFFF;
					padding: 0 14rpx;
					height: 44rpx;
					line-height: 44rpx;
					background: #5FCB34;
					border-radius: 20rpx;
					text-align: center;
					margin-left: 16rpx;
				}

				.no-auth {
					background: #FF5656;
				}
			}

			.not-login {
				// font-size: 26rpx;
				font-size: calc(26rpx * 1.2);
				color: #666666;
				padding: 4rpx 12rpx;
				border-radius: 28rpx;
				border: 1px solid #666666;
			}

			.setting {
				font-weight: 500;
				// font-size: 24rpx;
				font-size: calc(24rpx * 1.4);
				color: #666666;

				.icon-setting {
					width: 32rpx;
					height: 32rpx;
					margin-left: 2rpx;
				}
			}
		}
	}

	.order-card {
		padding: 26rpx 0 34rpx;

		.card-title {
			padding: 0 62rpx 0 30rpx;
			font-weight: 500;
			// font-size: 28rpx;
			font-size: calc(28rpx * 1.4);
			color: #666666;
			margin-bottom: 38rpx;

			.all {
				font-weight: 500;
				// font-size: 24rpx;
				font-size: calc(24rpx * 1.4);
				color: #FFC046;
			}
		}

		.grid-item {
			width: 25%;
			text-align: center;

			.grid-img {
				width: 64rpx;
				height: 64rpx;
				margin: 0 auto;
				display: block;
			}

			.grid-text {
				font-weight: 500;
				// font-size: 21rpx;
				font-size: calc(22rpx * 1.4);
				color: #666666;
				margin-top: 14rpx;
			}
		}
	}

	.common-card {
		.grid-img {
			width: 56rpx !important;
			height: 56rpx !important;
		}

		.grid-item {
			margin-bottom: 50rpx;
		}
	}
</style>